<template>
  <view class="pingjia_page">
    <view class="page_top">
      <u-tabs
        :list="list4"
        lineWidth="30"
        lineHeight="7"
        :lineColor="`url(${lineBg}) 100% 100%`"
        :activeStyle="{
          color: '#303133',
          fontWeight: 'bold',
        }"
        :inactiveStyle="{
          color: '#606266',
        }"
        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
      >
      </u-tabs>
    </view>
    <view class="page_bottom">
      <scroll-view scroll-y="true" class="uni_swiper_tab item">
        <view class="_card" v-for="(i, index) in allArr" :key="index">
          <!-- <view class="item_title">{{ i.jingquName }}</view>
					<view class="item_center">
						<image :src="i.jingquPictureUrl">
						</image>
						<view class="i_c_right">
							<view class="name_price">
								<text class="name2">{{ i.name2 }}</text>
								<text class="price">￥{{ i.price }}</text>
							</view>
							<view class="name_price time_num">
								<text>
									<text v-if="!i.isJiuDian">日期：</text>
									{{ i.time }}
								</text>
								<text>×{{ i.number }}</text>
							</view>
							<view class="time2">
								<text v-if="i.isJiuDian">入离时间：</text>
								<text v-else>时间：</text>
								<text>{{ i.time2 }}</text>
							</view>
							<view class="label">
								<text v-if="i.isJiuDian && i.label">
									<text class="label_item" v-for="(i2, index2) in i.label.split(',')" :key="index2">{{ i2 }}</text>
								</text>
							</view>
						</view>
					</view>
					<view class="item_bottom">
						<view class="price2">
							实付款 <text class="price2_num">￥{{ i.price2 }}</text>
						</view>
						<view class="_pingjia">
							<text @click="toWrite(i)">填写评价</text>
						</view>
					</view> -->

          <item-info :itemInfo="i" @write-evaluate="writeEvaluate" />
        </view>
        <u-loadmore status="nomore" />
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { orderPageApi } from "@/api/mine";
import ItemInfo from "./comp/ItemInfo";

export default {
  components: {
    ItemInfo,
  },
  data() {
    return {
      lineBg:
        "",
      status: 3,
      list4: [
        {
          name: "全部",
        },
        {
          name: "景区",
        },
        {
          name: "酒店",
        },
      ],
      allArr: [],
    };
  },

  onLaunch() {},
  onShow() {
    this.getOrderPageApi();
  },

  onLoad() {},
  methods: {
    // 去填写
    writeEvaluate(item) {
      let { jingquName, jingquPictureUrl, orderDetailsVos, jingquId, orderId } =
        { ...item };
      let data = JSON.stringify({
        jingquName,
        jingquPictureUrl,
        orderDetailsVos,
        jingquId,
        orderId,
      });
      uni.navigateTo({
        url: `/pages/mine/waitingComment/writeComment?data=${data}`,
      });
    },
    // 获取待评价列表
    getOrderPageApi() {
      orderPageApi(1)
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            this.allArr = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });

      // this.allArr.forEach((ele) => {
      // 	ele.labelArr=[]
      // 	if (ele.isJiuDian && ele.label) {
      // 		ele.labelArr = ele.label.split(',')
      // 	}
      // })
      // console.log(this.allArr,"++++++++++++")
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f5f6f7;
}

.pingjia_page {
  width: 750rpx;
  height: 100vh;
  position: relative;
  overflow: hidden;

  .page_top {
    background: #fff;
    height: 96rpx;
  }

  .page_bottom {
    height: 100%;
    width: 100%;
    padding-top: 16rpx;

    .uni_swiper_tab {
      width: 100%;
      height: calc(100vh - 160rpx);
    }

    .item {
      width: 718rpx;
      margin: 0 auto;

      ._card {
        width: 100%;
        padding: 22rpx 32rpx;
        margin-bottom: 16rpx;
        background: #fff;
        border-radius: 10rpx;
      }

      .item_title {
        font-size: 36rpx;
        color: #333333;
        line-height: 50rpx;
        margin-bottom: 24rpx;
        font-weight: bolder;
      }

      .item_center {
        width: 100%;
        display: flex;
        align-items: flex-start;

        image {
          display: inline-block;
          width: 176rpx !important;
          height: 176rpx;
          border-radius: 12rpx;
          margin-right: 22rpx;
        }

        .i_c_right {
          flex: 2.2;

          .name_price {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .name2,
            .price {
              font-size: 32rpx;
              color: #333333;
              line-height: 45rpx;
              font-weight: bolder;
            }

            .price {
              font-size: 24rpx;
            }
          }

          .time_num,
          .time2 {
            margin: 10rpx 0;
            font-size: 24rpx;
            color: #999999;
          }

          .label {
            .label_item {
              padding: 6rpx 16rpx;
              margin-right: 16rpx;
              color: #ff841c;
              font-size: 20rpx;
              height: 32rpx;
              background: rgba(255, 242, 230, 1);
            }
          }
        }
      }

      .item_bottom {
        margin-top: 36rpx;
        text-align: right;

        .price2 {
          font-size: 28rpx;
          font-weight: bolder;
          color: #333333;

          .price2_num {
            font-size: 32rpx;
            color: #ff841c;
          }
        }

        ._pingjia {
          text-align: right;
          margin-top: 32rpx;
          height: 64rpx;
          line-height: 64rpx;

          text {
            display: inline-block;
            width: 176rpx;
            text-align: center;
            background: #ffffff;
            border-radius: 164rpx;
            border: 2rpx solid #999999;
            font-size: 28rpx;
            color: #999999;
          }
        }
      }
    }
  }
}

.u-tabs__wrapper__nav__item {
  width: 30%;
}
</style>
